<script setup lang="ts">
import { io } from "socket.io-client";
import { baseURL } from "@/utils/request";
import { useUserStore } from "@/stores/user";
import { useRoute } from "vue-router";
import { ref } from "vue";
const route = useRoute();
const store = useUserStore()
// io 是 socket.io 库的函数, 可以创建实例
// 传入的参数包括 url 和对应配置对象
// 其中有认证身份的 token 还有认证订单的 orderId
const socket = io(baseURL, {
  auth: {
    token: `Bearer ${store.user.token}`
  },
  query: {
    orderId: route.query.orderId
  }
});

// socket 就是创建出来的聊天频道实例
// 如果想监听对方发送的消息使用 socket.on(事件名, 回调函数)
// 如果想给对方发消息使用 socket.emit(事件名, 数据)
// 这里的事件名, 是前后端约定的接口文档当中编写好的规范, 必须对应
// 监听链接成功
socket.on("connect", () => {
  console.log('聊天频道对接成功');
})

// 聊天的基本
// 1. 监听对方有没有跟你说话
socket.on('receiveChatMsg', (res) => {
  console.log(res);
  msgList.value.push(res.msg.content)
})
// 2. 随时可以跟对方说话
const inputVal = ref('');
const sendMsg = () => {
  // 将用户输入的内容发送给服务器
  socket.emit('sendChatMsg', {
    // 这个参数格式参考接口文档
    from: store.user.id,
    to: 100,
    msgType: 1,
    msg: {
      content: inputVal.value
    }
  });
}

// 保存聊天记录
const msgList = ref<string[]>([])
</script>

<template>
  <div>
    聊天室
    <!-- 输入框和按钮 -->
    <input type="text" v-model="inputVal">
    <button @click="sendMsg">发送</button>
    <h2>聊天记录</h2>
    <ul>
      <li v-for="(item, index) in msgList" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
  
<style lang="scss"></style>